<template>
    <div>
        <van-nav-bar fixed="true" title="案例广场">
        </van-nav-bar>
        <div>
            <van-swipe :autoplay="3000" style="margin-top: 46px" indicator-color="white">
                <van-swipe-item><img src="../../static/images/lunbo6.jpg" width="100%" height="100%"></van-swipe-item>
                <van-swipe-item><img src="../../static/images/lunbo3.jpg" width="100%" height="100%"></van-swipe-item>
                <van-swipe-item><img src="../../static/images/lunbo4.jpg" width="100%" height="100%"></van-swipe-item>
                <van-swipe-item><img src="../../static/images/lunbo5.jpg" width="100%" height="100%"></van-swipe-item>
            </van-swipe>
        </div>
        <div >
            <van-grid :gutter="10" column-num="2" style="padding-bottom: 22px" icon-size="78px" clickable true>
                <van-grid-item @click="toList(1)" :key="value" icon="photo-o" text="文字" >
                    <img src="../../static/images/anli5.jpg" width="100" height="100">
                    <p>行政案例</p>
                </van-grid-item>

                <van-grid-item  @click="toList(2)" :key="value" icon="photo-o" text="文字" >
                    <img src="../../static/images/anli6.jpg" width="100" height="100">
                    <p>经济案例</p>
                </van-grid-item>

                <van-grid-item @click="toList(3)" :key="value" icon="photo-o" text="文字" >
                    <img src="../../static/images/anli7.jpg" width="100" height="100">
                    <p>民事案例</p>
                </van-grid-item>

                <van-grid-item @click="toList(4)" :key="value" icon="photo-o" text="文字" >
                    <img src="../../static/images/anli8.jpg" width="100" height="100">
                    <p>刑事案例</p>
                </van-grid-item>
            </van-grid>
        </div>
    </div>
</template>

<script>
    export default {
        name: "home",
        methods:{
            toList(id){
                this.$router.push({path:"/lawyerCaseList",query:{id:id}})
            }
        }
    }
</script>

<style scoped>
    .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        background-color: #39a9ed;
        margin-bottom: 20px;
    }
</style>
